<!--
 * @Descripttion:
 * @version:
 * @Author: ZhangXue
 * @Date: 2021-07-14 10:28:52
 * @LastEditors: ZhangXue
 * @LastEditTime: 2021-07-14 10:34:50
-->
<template>
  <div class="fd-light-title">
      <span class="fd-text">{{title}}</span>
      <span class="fd-sub-text">{{subTitle}}</span>
  </div>
</template>
<script>
export default {
  name: "lightTitle",
  props: {
    title: {
      type: String,
      required: true
    },
    subTitle: {
      type: String
    }
  }
};
</script>
<style lang="less" scoped>
.fd-light-title {
  position: relative;
  width: 100%;
  height: 36px;
  border: 1.5px solid rgba(55,144,235,0.6);
  text-align: left;
  padding-left: 15px;
  &:before {
    position: absolute;
    display: inline-block;
    content: '';
    width: 20px;
    height: 21px;
    background: url("@{imgUrl}/common/title-rect.png") center no-repeat;
    bottom: -7px;
    left: -8px;
  }
  &:after {
      position: absolute;
      display: inline-block;
      content: '';
      width: 305px;
      height: 36px;
      background: url("@{imgUrl}/common/light-title-bg.png") center no-repeat;
      right: 0;
      top: -1px;
      z-index: 0;
  }
  .fd-text {
    display: inline-block;
    line-height: 33px;
    font-size: 20px;
    font-weight: bold;
    color: #00d5ff;
    position: relative;
    &:before {
      display: inline-block;
      position: absolute;
      content: "";
      width: 132px;
      height: 18px;
      background: url("@{imgUrl}/common/title-light.png") center no-repeat;
      top: -10px;
      left: -4px;
    }
  }
  .fd-sub-text {
    float: right;
    margin-right: 15px;
    font-size: 18px;
    color: #00d5ff;
    line-height: 33px;
    z-index: 1;
  }
}
</style>

